<template>
  <a-modal v-model:visible="modelValue" :title="$t('调单')" :footer="null" @cancel="close()" :afterClose="close"
           width="60%">
    <a-form layout="vertical">
      <a-row :gutter="16">
        <a-col :md="6" :xs="24">
          <a-form-item :label="$t('订单编号')">
            <a-input v-model:value="page.loanRecordId"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="6" :xs="24">
          <a-form-item :label="$t('用户姓名')">
            <a-input v-model:value="page.name"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="6" :xs="24">
          <a-form-item :label="$t('手机号码')">
            <a-input v-model:value="page.phone"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="6" :xs="24">
          <a-form-item :label="$t('订单状态')">
            <a-select v-model:value="page.orderStatus" allowClear>
              <a-select-option v-for="item in orderStatusList" :key="item.key" :value="item.key">{{
                  item.value
                }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
<!--        <a-col :md="6" :xs="24">-->
<!--          <a-form-item :label="$t('钱包阶段')">-->
<!--            <a-select v-model:value="page.purseStatus" allowClear>-->
<!--              <a-select-option v-for="item in walletProgressList" :key="item.key" :value="item.key">{{-->
<!--                  item.value-->
<!--                }}-->
<!--              </a-select-option>-->
<!--            </a-select>-->
<!--          </a-form-item>-->
<!--        </a-col>-->
        <a-col :md="6" :xs="24">
          <a-form-item :label="$t('付款阶段')">
            <a-select v-model:value="page.paymentStatus" allowClear>
              <a-select-option v-for="item in payProgressList" :key="item.key" :value="item.key">{{
                  item.value
                }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="6" :xs="24">
          <a-form-item :label="$t('分配状态')">
            <a-select v-model:value="page.allocationStatus" allowClear>
              <a-select-option :value="1">{{ $t('已分配') }}</a-select-option>
              <a-select-option :value="0">{{ $t('未分配') }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="6" :xs="24">
          <a-form-item :label="$t('客服')">
            <a-select v-model:value="page.employeeId" allowClear>
              <a-select-option v-for="item in systemUserList" :key="item.id" :value="item.id">{{
                  item.name
                }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="8" :xs="24">
          <a-form-item :label="$t('申请时间')">
            <a-range-picker v-model:value="page.timeValue"/>
          </a-form-item>
        </a-col>
        <a-col :md="8" :xs="24">
          <a-form-item :label="$t('注册时间')">
            <a-range-picker v-model:value="page.registerTimeValue"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col style="text-align: right" :span="24">
          <a-button type="primary" @click="getTableData">{{ $t('查询') }}</a-button>
          <a-button style="margin-left: 10px" @click="resetSearch">{{ $t('重置') }}</a-button>
        </a-col>
      </a-row>
    </a-form>
    <div style="padding:15px 0px">
      <a-button type="primary" style="margin-right: 10px" @click="distribution('select')">{{ $t('所选分配') }}</a-button>
      <a-button type="primary" @click="distribution('search')">{{ $t('所搜分配') }}</a-button>
    </div>
    <a-table row-key="loanRecordId" :columns="tableColumn" :pagination="pagination" :data-source="tableData"
             :scroll="{x:1000}" :row-selection="{selectedRowKeys:tableSelectRows, onChange:onSelectChange}">
    </a-table>

    <a-modal v-model:visible="staffVisible.isShow" :title="staffVisible.title" @ok="distributionConfirm"
             :afterClose="staffClose()">
      <a-form layout="vertical">
        <a-row :gutter="16">
          <a-col :md="8" :xs="24">
            <a-form-item :label="$t('员工姓名')">
              <a-input v-model:value="userPage.systemName" allowClear></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="8" :xs="24">
            <a-form-item :label="$t('账号')">
              <a-input v-model:value="userPage.systemAccount" allowClear></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col style="text-align: right" :span="24">
            <a-button type="primary" @click="getSystemUser">{{ $t('查询') }}</a-button>
          </a-col>
        </a-row>
      </a-form>
      <a-table style="margin-top: 15px"
               row-key="systemId"
               :columns="[
         {title: $t('员工姓名'), dataIndex: 'systemName',align: 'center'},
         {title: $t('账号'), dataIndex: 'systemAccount',  align: 'center',},
      ]"
               :data-source="userTableData"
               :row-selection="{selectedRowKeys:userSelectRows, onChange:onUserSelectChange}"
               :pagination="false"
               max-height="500px"
      >
      </a-table>
    </a-modal>
  </a-modal>
</template>

<script>
import {computed, createVNode, onMounted, reactive, toRefs, watch} from "vue";
import locale from '@/locale'
import {getOrderList, distributionSearch, distributionSelect, selectTransferUser} from "../../../api/order";
import {selectSystemUser} from "../../../api";
import {dateFormatTimeStamp} from "@/utils"
import {message} from "ant-design-vue"

const {t} = locale.global
const orderStatusList = [
  {key: 0, value: t('未申请')},
  {key: 1, value: t('审核中')},
  {key: 3, value: t('待放款')},
  {key: 4, value: t('放款中')},
  {key: 5, value: t('放款失败')},
  {key: -12, value: t('已放款')},
]
const walletProgressList = [
  {key: 1, value: t('可提现保证金')},
  {key: 2, value: t('待发起提现')},
  {key: 3, value: t('已发起提现')},
  {key: 4, value: t('已提现保证金')},
]
const payProgressList = [
  {key: 2, value: t('待付保证金')},
  {key: 3, value: t('已付保证金')},
  {key: 4, value: t('待付解冻费')},
  {key: 5, value: t('已付解冻费')},
  {key: 6, value: t('待付事故处理费')},
  {key: 7, value: t('已付事故处理费')},
  {key: 8, value: t('待付插队费')},
]
const tableColumn = [
  {
    title: t('订单编号'), dataIndex: 'loanRecordId', width: 150, align: 'center', customRender: ({text, record, index}) => {
      return record.orderStatus === 0 ? '' : text
    }
  },
  {title: t('用户姓名'), dataIndex: 'name', width: 150, align: 'center'},
  {title: t('手机号码'), dataIndex: 'phone', width: 150, align: 'center',},
  {title: t('注册时间'), dataIndex: 'createTime', width: 150, align: 'center'},
  {
    title: t('申请时间'), dataIndex: 'loanTime', width: 150, align: 'center', customRender: ({text, record, index}) => {
      return record.orderStatus === 0 ? '' : text
    }
  },
  {
    title: t('订单状态'), dataIndex: 'orderStatus', width: 150, align: 'center', customRender: ({text, record, index}) => {
      const status = orderStatusList.find(item => item.key === text)
      return status ? status.value : '/'
    }
  },

  {
    title: t('分配状态'),
    dataIndex: 'allocationStatus',
    width: 100,
    align: 'center',
    customRender: ({text, record, index}) => {
      return text === 1 ? t('已分配') : t('未分配')
    }
  },
  {title: t('客服'), dataIndex: 'employeeName', width: 100, align: 'center',},
]
export default {
  name: "transferOrder",
  props: {
    modelValue: {
      default: false
    }
  },
  setup(props, {emit}) {
    const state = reactive({
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      systemUserList: [],
      tableData: [],
      staffVisible: {
        isShow: false,
        type: '',
        title: ''
      },
      userPage: {},
      userTableData: [],
      tableSelectRows: [],
      userSelectRows: []
    })
    watch(() => props.modelValue, (value) => {
      if (value) {
        getTableData()
      }
    })
    const pagination = computed(() => ({
      current: state.page.pageNum,
      total: state.page.total,
      pageSize: state.page.pageSize,
      showSizeChanger: true,
      showQuickJumper: true,
      pageSizeOptions: ['10', '50', '100', '200'],
      showTotal: total => total,
      onChange: (page) => {
        state.page.pageNum = page
        getTableData()
      },
      onShowSizeChange: (page, size) => {
        state.page.pageNum = page
        state.page.pageSize = size
        getTableData()
      }
    }))

    function onSelectChange(selectedRowKeys) {
      state.tableSelectRows = selectedRowKeys
    }

    function onUserSelectChange(selectedRowKeys) {
      state.userSelectRows = selectedRowKeys
    }

    function close() {
      state.page = {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
      state.userSelectRows = []
      state.tableSelectRows = []
      emit('update:modelValue', false)
    }

    async function getTableData() {
      const [startLoanTime, endLoanTime] = dateFormatTimeStamp(state.page.timeValue || [])
      const [createTimeStart, createTImeEnd] = dateFormatTimeStamp(state.page.registerTimeValue || [])
      const params = {
        createTimeStart, createTImeEnd,
        startLoanTime, endLoanTime,
        ...state.page, pageType: 4
      }
      delete params.timeValue
      delete params.registerTimeValue
      const res = await getOrderList(params)
      if (res.code === 1) {
        const {list, total} = res.data
        state.tableData = list
        state.page.total = total
      }
    }

    function resetSearch() {
      state.page = {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
      getTableData()
    }

    function staffClose() {
      state.userPage = {}
      state.userSelectRows = []
    }

    function distribution(type) {
      if (type === 'select' && state.tableSelectRows.length === 0) return message.error(t('请勾选订单'))
      state.staffVisible = {
        type: type,
        isShow: true,
        title: type === 'search' ? t('所搜分配') : t('所选分配')
      }
      getSystemUser()
    }

    async function distributionConfirm() {
      if (state.userSelectRows.length === 0) return message.error(t('请勾选人员'))
      const api = (params) => state.staffVisible.type === 'select' ? distributionSelect(params) : distributionSearch(params)
      let params = {}
      if (state.staffVisible.type === 'select') {
        params = {
          loanRecordIdList: state.tableSelectRows,
          sysUserId: state.userSelectRows
        }
      } else {
        params = {
          ...state.page,
          sysUserId: state.userSelectRows
        }
      }
      const res = await api(params)
      if (res.code === 1) {
        message.success(t('操作成功'))
        getTableData()
        state.staffVisible.isShow = false
        state.userSelectRows = []
        state.tableSelectRows = []
      }
    }

    async function getSystemUser() {
      const res = await selectTransferUser(state.userPage)
      if (res.code === 1) {
        state.userTableData = res.data
      }
    }

    onMounted(() => {
      selectSystemUser().then(res => {
        state.systemUserList = res.data
      })
    })
    return {
      staffClose,
      distributionConfirm,
      getSystemUser,
      distribution,
      onUserSelectChange,
      onSelectChange,
      tableColumn,
      pagination,
      orderStatusList,
      walletProgressList,
      payProgressList,
      close,
      ...toRefs(state),
      getTableData,
      resetSearch
    }
  }
}
</script>

<style scoped>

</style>
